<template>
  <div>
    <!-- 历史版本列表 -->
    <!-- <el-dialog v-model="showHisVersion" class="his-version-dialog" title="历史版本" width="1000px" :align-center="true" :close-on-press-escape="false" :close-on-click-modal="false" @close="emits('update:showHisVersion', false)"> -->
    <div class="btns">
      <div class="restore" @click="restoreVersion">
        <el-icon>
          <RefreshLeft />
        </el-icon>恢复
      </div>
      <div class="delete" @click="deleteVersion">
        <el-icon>
          <Delete />
        </el-icon>删除
      </div>
      <div class="compare" @click="compareVersion">
        <el-icon>
          <Search />
        </el-icon>对比
      </div>
      <div class="compare-withnow" @click="compareVersionWithCur">
        <el-icon>
          <Search />
        </el-icon>和当前内容对比
      </div>
      <div class="check-num" v-if="versionChoosedList.length > 0">
        已勾选
        <span style="color: #f00;font-weight: bold;">{{ versionChoosedList.length }}</span>
        个版本
      </div>
    </div>
    <el-table ref="multipleTableRef" :row-key="getRowKeys" :data="hisVersionData" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column :reserve-selection="true" type="selection" width="35" />
      <!-- <el-table-column property="version" label="版本号" /> -->
      <el-table-column property="updateUser" label="操作人员" />
      <el-table-column property="updateTime" label="操作时间" width="155" />
    </el-table>
    <PaginationViewSimple
      :total="hisVersionDataTotal"
      :pageSize="hisVersionParams.pageSize"
      :currentPage="hisVersionParams.currentPage"
      :layout="'total, prev, pager, next, slot'"
      @changeSize="handleHisVersionSizeChange"
      @currentChange="handleHisVersionCurrentChange"
    />
    <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="showHisVersion = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>-->
    <!-- 版本内容对比 -->
    <el-dialog v-model="showHisVersionCompare" append-to-body class="content-compare-dialog" width="1400px" :title="`历史版本`" :align-center="true" :close-on-press-escape="false" :close-on-click-modal="false">
      <div class="content-compare">
        <div class="old-content" v-html="versionContent.old_content"></div>
        <div class="new-content" v-html="versionContent.new_content"></div>
      </div>
      <!-- <template #footer>
              <span class="dialog-footer">
                  <el-button @click="showHisVersionCompare = false" >关闭</el-button>
              </span>
      </template>-->
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { RefreshLeft, Delete, Search } from '@element-plus/icons-vue'
import { versionSelectPage, versionDeleteList, versionRollbackVersion, versionCompareVersion } from '@/api/hisVersion'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

const props = defineProps({
  showHisVersion: {
    type: Boolean,
    default: false,
  },
  modelObj: {
    type: Object,
    default: () => {},
  },
})
const emits = defineEmits(['update:showHisVersion', 'restoreVersion'])
const router = useRouter()
const editId = ref(router.currentRoute.value.query.dataId ? router.currentRoute.value.query.dataId : '')
const modelId = ref(router.currentRoute.value.query.modelId) // 模型id
// const folderId = ref(router.currentRoute.value.query.folderId) // 文件夹id
const creatIdField = router.currentRoute.value.query.creatIdField || 'folderId' // 我的or共享
const type = ref(creatIdField == 'folderId' ? 3 : 4)

// 版本对比
const showHisVersion = ref(props.showHisVersion)
const showHisVersionCompare = ref(false)
const hisVersionData = ref([])
const hisVersionDataTotal = ref()
const versionChoosedList = ref([])
const versionIds = ref('')
const versionContent = ref({})
const multipleTableRef = ref()
const getRowKeys = (row) => {
  return row.resourceId
}
// 分页参数
const hisVersionParams = reactive({
  pageSize: 10,
  currentPage: 1,
  id: editId.value,
  type: type.value, //0:我的 1:共享
})
//    获取版本列表
const getHisVersionData = async () => {
  let res = await versionSelectPage(hisVersionParams)
  if (res.code == 20000) {
    hisVersionData.value = res.data.list
    hisVersionDataTotal.value = res.data.total
  }
}
const handleHisVersionSizeChange = (size) => {
  hisVersionParams.pageSize = size
  getHisVersionData()
}
// 页数修改
const handleHisVersionCurrentChange = (page) => {
  hisVersionParams.currentPage = page
  getHisVersionData()
}
// 查看历史版本
const handleHisVersion = () => {
  showHisVersion.value = true
  getHisVersionData()
}
handleHisVersion()
// 勾选版本
const handleSelectionChange = (val) => {
  versionChoosedList.value = val.map((item) => item)
  versionIds.value = versionChoosedList.value.map((item) => item.resourceId).join(',')
}
// 恢复版本内容
const restoreVersion = async () => {
  if (versionChoosedList.value.length != 1) {
    ElMessage({
      message: '请勾选一个版本恢复为当前版本！',
      type: 'warning',
    })
  } else {
    ElMessageBox.confirm(
      '<div><p style="font-size: 16px;margin-bottom: 15px;">是否确认将该版本内容填充到当前编辑器？填充后需再次发布后生效</p><span style="font-size: 14px;color: #AAA;"></span></div>',
      '删除确认',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
    ).then(async () => {
      let params = {
        modelId: modelId.value,
        resourceId: versionChoosedList.value[0].resourceId,
        id: editId.value,
        type: type.value,
      }
      let res = await versionRollbackVersion(params)
      if (res.code == 20000) {
        emits('restoreVersion', res.data)
      }

      //恢复并发布
      // let res = await versionRollbackVersion({ id: versionIds.value })
      // if (res.code == 20000) {
      //   ElMessage({
      //     message: '恢复成功！',
      //     type: 'success',
      //   })
      //   getHisVersionData()
      //   getFields()
      //   showHisVersion.value = false
      // }
    })
  }
}
// 删除
const deleteVersion = async () => {
  if (versionChoosedList.value.length < 1) return
  ElMessageBox.confirm(
    '<div><p style="font-size: 16px;margin-bottom: 15px;">是否删除该内容？</p><span style="font-size: 14px;color: #AAA;">删除后内容放入回收站</span></div>',
    '删除确认',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }
  ).then(async () => {
    let params = {
      modelId: modelId.value,
      resourceIdList: versionChoosedList.value.map((item) => item.resourceId),
      id: editId.value,
      type: type.value,
    }
    let res = await versionDeleteList(params)
    if (res.code == 20000) {
      ElMessage({
        message: '删除成功！',
        type: 'success',
      })
      getHisVersionData()
    }
  })
}
// 对比
const compareVersion = async () => {
  if (versionChoosedList.value.length != 2) {
    ElMessage({
      message: '请勾选两个版本进行对比！',
      type: 'warning',
    })
  } else {
    let params = {
      modelId: modelId.value,
      resourceIdList: versionChoosedList.value.map((item) => item.resourceId),
      id: editId.value,
      type: type.value,
    }
    let res = await versionCompareVersion(params)
    if (res.code == 20000) {
      versionContent.value.old_content = res.data[0].resourceData.content
      versionContent.value.new_content = res.data[1].resourceData.content
      showHisVersionCompare.value = true
    }
  }
}
// 与当前内容对比
const compareVersionWithCur = async () => {
  if (versionChoosedList.value.length != 1) {
    ElMessage({
      message: '请勾选一个版本与当前内容进行对比！',
      type: 'warning',
    })
  } else {
    let params = {
      id: editId.value,
      modelId: modelId.value,
      resourceIdList: [props.modelObj.resourceId, versionChoosedList.value[0].resourceId],
      type: type.value,
    }
    let res = await versionCompareVersion(params)
    if (res.code == 20000) {
      versionContent.value.old_content = res.data[0].resourceData.content
      versionContent.value.new_content = res.data[1].resourceData.content
      showHisVersionCompare.value = true
    }
  }
}
</script>
<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 20px;
  font-size: 14px;
  transform: translateY(-10px);
  div {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    .el-icon {
      margin-right: 5px;
    }
  }
}
.content-compare-dialog {
  .content-compare {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-height: 70vh;
    min-height: 50vh;
    overflow: auto;
    .old-content,
    .new-content {
      position: relative;
      width: 50%;
      padding: 0 30px;
      padding-top: 20px;
      overflow-x: auto;
      &::after {
        content: '历史版本';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: #aaa;
      }
    }
    .new-content {
    }
    .old-content {
      &::after {
        content: '当前版本';
      }
    }
    .old-content {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: rgba(139, 143, 145, 0.3);
        margin: 0 3px;
        z-index: 1;
      }
    }
  }
}
</style>
